<!-- 
  @description: 圆角卡片通用容器
-->
<template>
  <div
    class="card-dv dv"
    :style="{
      borderRadius: '10px',
      backgroundColor: '#fff',
      transition: 'all 0.2s ease',
      ...customStyle,
    }"
  >
    <div class="header-dv" v-if="isShowTitle">
      <span>{{ title }}</span>
    </div>
    <div class="content-dv">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: 'Card name',
  },
  isShowTitle: {
    type: Boolean,
    default: false,
  },
  customStyle: {
    type: Object,
    default: {},
  },
})
</script>

<style lang="less" scoped>
@padding:3px 20px;
.card-dv {
  width: 500px;
  box-sizing: border-box;
  overflow: hidden;
  .dv-shadow();
}

.dv {
  .border-box-padding();
}
.header-dv {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
}

.content-dv {
  height: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
